<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-input
        class="clear"
        placeholder="请输入内容"
        v-model="form.query"
        @clear="getData"
        clearable
      >
        <template slot="append"
          ><i @click="getData" class="el-icon-search"></i
        ></template>
      </el-input>
      <el-button type="primary" @click="add">添加用户</el-button>

      <el-table :data="arr" border :header-cell-style="{background:'#EEF1F6',color:'#606266'}">
        <el-table-column type="index" width="50" label="#"></el-table-column>
        <el-table-column prop="username" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="150">
        </el-table-column>
        <el-table-column prop="mobile" label="电话" width="180">
        </el-table-column>
        <el-table-column prop="role_name" label="角色" width="120">
        </el-table-column>
        <el-table-column label="状态" width="120">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.mg_state"
              :active-value="true"
              :inactive-value="false"
              @change="updateState(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="update(scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="del(scope.row.id)"
            >删除</el-button>
            <el-tooltip
              class="item"
              effect="dark"
              content="分配角色"
              placement="top"
            >
              <el-button
                size="mini"
                type="warning"
                icon="el-icon-setting"
                @click="role(scope.row)"
              >权限</el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.pagenum"
        :page-sizes="[2, 5, 10, 15]"
        :page-size="form.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <el-dialog :title="title+'用户'" :visible.sync="dialogVisible" width="40%">
      <el-form label-position="left" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="formList.username" :disabled="!bol"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" v-if="bol == true">
          <el-input v-model="formList.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="formList.email"></el-input>
        </el-form-item>
        <el-form-item label="手机">
          <el-input v-model="formList.mobile"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="En">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="分配角色" :visible.sync="dialogVisible2" width="40%">
      <el-form label-position="left" label-width="80px">
        <el-form-item label="当前用户:">
          <span>{{ formRole.username }}</span>
        </el-form-item>
        <el-form-item label="当前角色:">
          <span>{{ formRole.role_name }}</span>
        </el-form-item>
        <el-form-item label="分配角色:">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="roleEn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bol: false,
      dialogVisible: false,
      dialogVisible2: false,
      arr: [],
      options: [],
      total: 0,
      value: "",
      form: {
        query: "",
        pagenum: 1,
        pagesize: 2,
      },
      formList: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      formRole: {
        email: "",
        mobile: "",
        username: "",
        role_name: "",
      },
    };
  },
  computed:{
    title(){
      return this.bol == true ? '添加' : '编辑'
    }
  },
  methods: {
    //分配角色按钮
    async role(row) {
      this.dialogVisible2 = true;
      Object.assign(this.formRole, row);
      var { data: res } = await this.$http.get("roles");
      this.options = res.data;
      // console.log(res.data);
    },
    //分配角色对话框 确定按钮
    async roleEn() {
      this.dialogVisible2 = false;
      // console.log(this.formRole.id,this.value);
      var res = await this.$http.put(`users/${this.formRole.id}/role`, {
        rid: this.value,
      });
      this.hint(res);
    },
    //添加用户按钮
    add() {
      this.bol = true;
      this.dialogVisible = true;
      for (const key in this.formList) {
        this.formList[key] = "";
      }
    },
    //编辑修改按钮
    update(row) {
      this.bol = false;
      this.dialogVisible = true;
      Object.assign(this.formList, row);
    },
    //添加修改对话框 确定按钮
    async En() {
      // 添加用户
      if (this.bol == true) {
        var res = await this.$http.post("users", this.formList);
        this.hint(res);
      } else {
        //修改用户
        var res = await this.$http.put(`users/${this.formList.id}`, {
          email: this.formList.email,
          mobile: this.formList.mobile,
        });
        this.hint(res);
      }
      this.dialogVisible = false;
    },
    //删除用户功能
    del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          var res = await this.$http.delete(`users/${id}`);
          this.hint(res);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //修改用户状态 change事件
    async updateState(row) {
      var res = await this.$http.put(`users/${row.id}/state/${row.mg_state}`);
      this.hint(res);
      // console.log(row);
    },
    //封装提示信息
    hint(res) {
      if (res.data.meta.status == 200 || res.data.meta.status == 201) {
        this.$message({
          showClose: true,
          message: res.data.meta.msg,
          type: "success",
        });
        this.getData();
      } else {
        this.$message({
          showClose: true,
          message: res.data.meta.msg,
          type: "error",
        });
      }
    },
    //切换每页显示多少条数据
    handleSizeChange(size) {
      this.form.pagesize = size;
      this.getData();
    },
    //切换页码
    handleCurrentChange(num) {
      this.form.pagenum = num;
      this.getData();
    },
    //用户列表数据
    async getData() {
      var { data: res } = await this.$http.get("users", {
        params: this.form,
      });
      // console.log(res.data.users);
      this.arr = res.data.users;
      this.total = res.data.total;
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style>
.clear {
  width: 300px !important;
}
.el-card {
  margin-top: 20px;
}
</style>